<!DOCTYPE html>
<html lang="zh_CN">
<head>
  <meta charset="UTF-8">
  <title>图片库</title>
  <link href="/mix/bootstrap.min.css" rel="stylesheet">
  <link href="/mix/bootstrap-theme.min.css" rel="stylesheet">
  <link href="/mix/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link href="/mix/jquery-ui.min.css" rel="stylesheet">
  <link href="/mix/jquery-ui.theme.min.css" rel="stylesheet">
  <style>
    td, th {
      vertical-align: middle !important;
    }

    .row_text {
      width: 200px;
      display: inline-block;
    }

    .small_text {
      width: 60px;
      display: inline;
    }

    .tip_text {
      color: #999;
      font-size: smaller;
    }

    .field_box {
      display: none;
    }

    .field_box th {
      width: 25%;
    }

    .list_img_box {
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
    }

    .list_img {
      width: 150px;
      height: 100px;
      display: block;
      margin: 10px;
      cursor: pointer;
    }

  </style>
</head>
<body>
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
  <ul class="layui-tab-title">
    <li class="layui-this">本地上传</li>
    <li>图片库</li>
  </ul>
  <div class="layui-tab-content">
    <!--本地上传区域-->
    <div class="layui-tab-item layui-show">
      <div style="text-align: center">
        <button type="button" class="layui-btn layui-btn-normal" id="uploadImg">
          <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
        <button type="button" class="layui-btn layui-btn-danger" id="btn-ok" style="display: none;">确定</button>
      </div>
      <div style="text-align: center;margin: 20px 0">
        <img src="" alt="上传图片" style="display: none;width: 150px;height: 100px;" id="previewImg">
      </div>
    </div>
    <!--图片库-->
    <div class="layui-tab-item" id="imgLib">
      <div class="list_img_box" id="list_img_box">
      </div>
      <div id="lay_page_box"></div>
    </div>
  </div>
</div>
<!--<div class="pagination pagination-sm">{P pages}</div>-->
<script src="/mix/jquery.min.js"></script>
<script src="/mix/bootstrap.min.js"></script>
<script src="/layui/layui.js"></script>
<script src="/mix/jquery-ui.min.js"></script>
<script>
  var imageList={json_encode($imgList)};
  var callBackTarget = "{$_GET['target']}";
  layui.use(['element', 'layer', 'upload','laypage'], function () {
    var layer = layui.layer;
    var upload = layui.upload;
    var element = layui.element;
    upload.render({
      elem: '#uploadImg' //绑定元素
      , url: 'uploadImg.html' //上传接口
      , accept: 'images'
      , field: 'img'
      , before: function () {
        layer.load(1);
      }
      , done: function (resp) {
        //上传完毕回调
        if (resp.status != 'success') {
          alert(resp.msg);
        } else {
          $('#previewImg').attr('src', resp.data).show();
          $('#btn-ok').show();
        }
        layer.closeAll('loading');
      }
      , error: function () {
        //请求异常回调
        layer.closeAll('loading');
      }
    });
    layui.laypage.render({
      elem: 'lay_page_box'
      ,count: imageList.length //数据总数，从服务端得到
      ,limit:9
      ,jump: function(obj, first){
        var start=(obj.curr-1)*obj.limit;
        var end=start+obj.limit;
        if(end>imageList.length){
          end=imageList.length;
        }
        console.log(start,end);
        var box=$('#list_img_box');
        box.empty();
        var img=null;
        for (var i=start;i<end;++i){
          img=document.createElement('img');
          img=$(img);
          img.attr('src',imageList[i].url);
          img.attr('class','list_img');
          img.on('click', function () {
            var src = this.getAttribute('src');
            sendUrl(src);
          });
          box.append(img);
        }
      }
    });
  });
  $('#btn-ok').on('click', function () {
    var src = $('#previewImg').attr('src');
    sendUrl(src);
  });

  function sendUrl(url) {
    window.parent.uploadImgCallback(callBackTarget, url);
    var index = window.parent.layer.getFrameIndex(window.name); //获取窗口索引
    parent.layer.close(index);
  }
</script>
</body>
</html>